<!--
 * @Author: xcl
 * @Date: 2022-04-20 18:03:02
 * @LastEditors: xcl
 * @LastEditTime: 2022-11-24 10:01:47
 * @Description: 顶部导航组件
-->
<template> 
  <div id="top-nav">
    <div class="title">CESIUM DEMO</div>
    <ul>
      <li
        :class="{ active: $route.name == 'Section' }"
        @click="$router.push({ path: '/section' })"
      >
        分析剖切
      </li>
      <li
        :class="{ active: $route.name == 'Video' }"
        @click="$router.push({ path: '/video' })"
      >
        视频融合
      </li>
      <li
        :class="{ active: $route.name == 'Effects' }"
        @click="$router.push({ path: '/effects' })"
      >
        3D特效
      </li>
      <li
        :class="{ active: $route.name == 'Roaming' }"
        @click="$router.push({ path: '/Roaming' })"
      >
        路径/轨迹漫游
      </li>
      <li
        :class="{ active: $route.name == 'MonolithicLayering' }"
        @click="$router.push({ path: '/monolithicLayering' })"
      >
        单体分层化
      </li>
      <li
        :class="{ active: $route.name == 'Draw' }"
        @click="$router.push({ path: '/draw' })"
      >
        绘制点线面
      </li>
      <li
        :class="{ active: $route.name == 'Migration' }"
        @click="$router.push({ path: '/migration' })"
      >
        迁徙图
      </li>
      <li
        :class="{ active: $route.name == 'Echarts' }"
        @click="$router.push({ path: '/echarts' })"
      >
        Echarts
      </li>
      <!-- <li
        :class="{ active: $route.name == 'Project' }"
        @click="$router.push({ path: '/project' })"
      >
        项目实例
      </li> -->
      <!-- <li
        :class="{ active: $route.name == 'Test' }"
        @click="$router.push({ path: '/test' })"
      >
        测试用例
      </li> -->
      <li
        :class="{ active: $route.name == 'BPMN' }"
        @click="$router.push({ path: '/bpmn' })"
      >
        BPMN
      </li>
      <li
        :class="{ active: $route.name == 'Babylon' }"
        @click="$router.push({ path: '/babylon' })"
      >
        Babylon
      </li>
      <!-- <li
        :class="{ active: $route.name == 'Vjsf' }"
        @click="$router.push({ path: '/vjsf' })"
      >
        Vjsf
      </li> -->
      <!-- <li
        :class="{ active: $route.name == 'Mock' }"
        @click="$router.push({ path: '/mock' })"
      >
        Mock
      </li> -->
    </ul>
  </div> 
</template>

<script>
export default {
  name: "TopNav",
  components: {},
  beforeMount() {},
  data() {
    return {};
  },
  props: {},
  watch: {},
  created() {},
  beforeDestroy() {},
  destroyed() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
#top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 12px;

  .title {
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    color: rgb(255, 254, 254);
  }

  ul {
    display: flex;
    align-items: center;
    justify-content: space-around;

    li {
      margin-right: 10px;
      cursor: pointer;
    }

    li:hover,
    li.active {
      color: aqua;
    }
  }
}
</style>
